<template>
    <div style="color: #fff">
        <!--    搜索表单-->
        <div style="margin-bottom: 20px">
            <el-input style="width: 240px" placeholder="请输入图书名称" v-model="params.name"></el-input>
            <el-input style="width: 240px; margin-left: 5px" placeholder="请输入图书标准码"
                      v-model="params.bookNo"></el-input>
            <el-button style="margin-left: 5px" type="primary" @click="load"><i class="el-icon-search"></i> 搜索
            </el-button>
            <el-button style="margin-left: 5px" type="warning" @click="reset"><i class="el-icon-refresh"></i> 重置
            </el-button>
        </div>

        <el-table :data="data.records" stripe row-key="id" default-expand-all>
            <el-table-column prop="id" label="编号" width="80"></el-table-column>
            <el-table-column prop="name" label="图书名称"></el-table-column>
            <el-table-column prop="bookNo" label="标准码"></el-table-column>
            <el-table-column prop="publisherDate" label="出版日期"></el-table-column>
            <el-table-column prop="author" label="作者"></el-table-column>
            <el-table-column prop="publisher" label="出版社"></el-table-column>
            <el-table-column prop="category" label="分类"></el-table-column>
            <el-table-column prop="total" label="数量"></el-table-column>
            <el-table-column prop="borrowed" label="借出"></el-table-column>
            <el-table-column prop="available" label="剩余"></el-table-column>
            <el-table-column label="操作" width="140">
                <template v-slot="scope">
                    <!--          scope.row 就是当前行数据-->
                    <el-button type="primary" size="mini" @click="borrow(scope.row.id)">借书</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--    分页-->
        <div style="margin-top: 20px">
            <el-pagination
                    background
                    :current-page="data.current"
                    :page-size="data.size"
                    layout="prev, pager, next"
                    @current-change="handleCurrentChange"
                    :total="data.total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
import request from "@/utils/request";
import Cookies from 'js-cookie'

export default {
    name: 'userList',
    data() {
        return {
            // admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {},
            data: {
                records: [],
                total: 0,
                size: 10,
                current: 1,
                orders: [],
                optimizeCountSql: true,
                searchCount: true,
                countId: null,
                maxLimit: null,
                pages: 1,
                id:0
            },
            params: {
                pageNum: 1,
                pageSize: 10,
                name: '',
                bookNo: '',
                id:0
            }
        }
    },
    created() {
        this.load()
    },
    methods: {
        load() {
            request.get('/book/page', {
                params: this.params,
            }).then(res => {
                if (res.code === '200') {
                    this.data = res.data
                    this.total = res.data.total
                }
            })

        },
        reset() {
            this.params = {
                pageNum: 1,
                pageSize: 10,
                name: '',
                bookNo: ''
            }
            this.load()
        },
        handleCurrentChange(pageNum) {
            // 点击分页按钮触发分页
            this.params.pageNum = pageNum
            this.load()
        },
        //借书
        borrow(row) {
            const data = Cookies.get('user');
            const obj = JSON.parse(data);
            this.data.id = obj.id;
            //发送后端请求传入图书id和用户id用户id从cookie中获取
            request.post('/borrow/saveBorrow', {
                bookId: row,
                userId: this.data.id
            }).then(res => {
                if (res.code === '200') {
                    this.$message({
                        message: '借书成功',
                        type: 'success'
                    });
                    this.load()
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    });
                }
            })

        }
    }
}
</script>

<style scoped>

</style>
